import React, { useState } from 'react'
import './design.css'
import Tab from '../../components/Drawdesigns/tab/index'
import Canvas from '../../components/Drawdesigns/canvas/canvas'
import Right from '../../components/right/index'
function Design() {
   const [selectedTextItem, setSelectedTextItem] = useState(false);
  const [textBoxes, setTextBoxes] = useState([])
  const [selectedTextBox, setSelectedTextBox] = useState(null);
  const [selectedItemFontSize, setSelectedItemFontSize] = useState(16);
    const [selectedItemColor, setSelectedItemColor] = useState('black');
    const [selectedItemBold, setSelectedItemBold] = useState(false);
  const addTextBox = (text, x, y) => {
    const newTextBox = {
      id: Date.now(),
      content: text,
      x,
      y,
      fontSize: 16,
      color: 'black',
      fontWeight: 'normal'
    };
    setTextBoxes((prev) => [...prev, newTextBox]);
  };

  const updateTextBox = (updatedBox) => {
    setTextBoxes((prev) => prev.map(box => (box.id === updatedBox.id ? updatedBox : box)));
  };


    const updateSelectedItemStyle = (style, value) => {
        if (style === 'bold') {
            setSelectedItemBold(!selectedItemBold);
        } else if (style === 'increaseFontSize') {
            setSelectedItemFontSize(selectedItemFontSize + 2);
        } else if (style === 'decreaseFontSize') {
            setSelectedItemFontSize(Math.max(selectedItemFontSize - 2, 1));
        } else if (style === 'setColor') {
            setSelectedItemColor(value);
        }
    };

  const back=()=>{
    window.location.href='/'
  }
  return (
    <div className='des_box'>
      <div className='des_top'>
        <div className='des_tleft'>
          <h1 style={{ color: "orange" }}>
            包图·在线设计
          </h1>
          <p onClick={back}>首页</p>
          <p>文件</p>
          <p>视图</p>
        </div>
        <div className='des_tright'>
          <button>分享</button>
          <button>无水印下载</button>
        </div>
      </div>
      <div className='des_mian'>
        <div className='des_left'>
          <Tab onAddTextBox={addTextBox} ></Tab>
        </div>
        <div className='des_center'>
          <Canvas textBoxes={textBoxes} setSelectedTextBox={setSelectedTextBox} updateSelectedItemStyle={updateSelectedItemStyle} selectedItemBold={selectedItemBold} selectedItemColor={selectedItemColor} selectedItemFontSize={selectedItemFontSize}/>
        </div>
        <div className='des_right'>
          <Right textBox={selectedTextBox} onUpdateTextBox={updateTextBox} fontSize={selectedItemFontSize}
                color={selectedItemColor}
                bold={selectedItemBold}
                updateTextStyle={updateSelectedItemStyle}></Right>
        </div>
      </div>

    </div>
  )
}

export default Design